{% extends 'base.html' %} {% block css%}
<style type="text/css">
    .b1 {
        color: blue;
    }
</style>
{% endblock %} {% block body%}
<div class="row">

    <div class="col-md-3">
        <div class="panel panel-danger">
            <div class="panel-heading">
                工程调试命令
            </div>
            <div class="panel-body">

                <table class="table table-hover">
                  
                    <tr>
                        <td>
                            <button class="btn btn-danger" id="btn1_inst_pause">
                                <i class='glyphicon glyphicon-step-forward'></i> &nbsp;&nbsp;
                                开始/停止仪表
                            </button>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <button class="btn btn-danger" id="btn1_inst_reboot">
                                <i class='glyphicon glyphicon-repeat'></i> &nbsp;&nbsp;
                                重启设备仪表
                            </button>
                        </td>
                    </tr>
                                                                                
                    <tr>
                        <td>
                            <button class="btn btn-danger" id="btn1_set">
                                <i class='glyphicon glyphicon-trash'></i> &nbsp;&nbsp;
                                清除所有参数
                            </button>
                        </td>
                    </tr>
                
                    <tr>
                        <td>
                            <button class="btn btn-danger" id="btn2_set">
                                <i class='glyphicon glyphicon-trash'></i> &nbsp;&nbsp;
                                清除所有记录
                            </button>
                        </td>
                    </tr>

                     <tr>
                        <td>
                            <button class="btn btn-danger" id="btn3_set">
                                <i class='glyphicon glyphicon-trash'></i> &nbsp;&nbsp;
                                清除运行时间
                            </button>
                        </td>
                    </tr>    

                     <tr>
                        <td>
                            &nbsp;
                        </td>
                    </tr>   

                    <tr>
                        <td>
                            <button class="btn btn-danger" id="btn4_set">
                                <i class='glyphicon glyphicon-repeat'></i> &nbsp;&nbsp;
                                重启树莓派BOX
                            </button>
                        </td>
                    </tr>    
                </table>
            </div>
        </div>

        <div class="alert alert-danger" role="alert">
            <i class='glyphicon glyphicon-info-sign'></i>&nbsp;&nbsp;
            谨慎操作！ <br>执行下列命令前，请务必明确其含义。
        </div>
    </div>



    <div class="col-md-3">
        <div class="panel panel-default">
            <div class="panel-heading">
                空调红外指令
            </div>
            <div class="panel-body">

                <table class="table table-hover">
                    <tr>
                        <td>
                            <span style="color:blue; font-size: 14px;">
                                <i class="glyphicon glyphicon-info-sign"></i>
                                &nbsp;
                                选择红外设备串口:
                            </span>                            
                            <select class="form-control" id="port_val" style="width:140px; height:30px"></select>
                        </td>
                    </tr>
                                   
                    <tr>
                        <td>
                            <button class="btn btn-success" onclick="rd_group_set(1)">
                                <i class='glyphicon glyphicon-send'></i> &nbsp;&nbsp;
                                发送第 1 组指令
                            </button>
                        </td>
                    </tr>
                
                    <tr>
                        <td>
                            <button class="btn btn-success" onclick="rd_group_set(2)">
                                <i class='glyphicon glyphicon-send'></i> &nbsp;&nbsp;
                                发送第 2 组指令
                            </button>
                        </td>
                    </tr>                

                    <tr>
                        <td>
                            <button class="btn btn-success" onclick="rd_group_set(3)">
                                <i class='glyphicon glyphicon-send'></i> &nbsp;&nbsp;
                                发送第 3 组指令
                            </button>
                        </td>
                    </tr>

                    <tr>
                        <td>
                            <button class="btn btn-success" onclick="rd_group_set(4)">
                                <i class='glyphicon glyphicon-send'></i> &nbsp;&nbsp;
                                发送第 4 组指令
                            </button>
                        </td>
                    </tr>
       
                </table>

                <hr>

                <table class="table table-hover">
                                   
                    <tr>
                        <td>
                            <button class="btn btn-danger" id="rd_group_test_loop_start">
                                <i class='glyphicon glyphicon-send'></i> &nbsp;&nbsp;
                                循环测试
                                <i id="rd_group_test_loop_start_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                            </button>

                            <input type="checkbox" id="rnd" checked>随机
                        </td>

                        <td>
                            <button class="btn btn-primary" id="rd_group_test_loop_end">
                                结束测试
                            </button>
                        </td>

                    </tr>
                </table>                




            </div>
        </div>


        <a  role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
           发送指令说明 <i class="glyphicon glyphicon-question-sign"></i>
        </a>

        <div class="collapse" id="collapseExample">
        <div class="well">
            <table class="table">
                <tr><td>01 06 00 01 00 01 19 CA</td><td>发送第1组</td></tr>
                <tr><td>01 06 00 01 00 02 59 CB</td><td>发送第2组</td></tr>
                <tr><td>01 06 00 01 00 03 98 0B</td><td>发送第3组</td></tr>
                <tr><td>01 06 00 01 00 04 D9 C9</td><td>发送第4组</td></tr>
            </table>
        </div>
        </div>

    </div>


    <div class="col-md-6">

        <div class="panel panel-default">
            <div class="panel-heading">
                命令控制台
            </div>
            <div class="panel-body">

        <table class="table table-hover table-condensed">
            <tr >
                <td>
                <textarea class="form-control" id="debug_info" spellcheck="false" rows="10"  placeholder="" style="background-color:#FFFFCC; font-size: 12px"></textarea>

                </td>
            </tr>
            <tr>
                <td>
                    <input class="form-control block" type="text" id="cmd_str" style="width:100%;height:32px" placeholder="">
                    <br><br>
                    <button class="btn btn-primary" id="btn_set_debug_cmd">
                    发送命令
                    </button>
                    &nbsp;&nbsp;
                    <button class="btn btn-success" id="btn_clear">
                    清除信息
                    </button>
                </td>
            </tr>
        </table>
        
        <div class="alert alert-info" role="alert">
        例如： 主界面数据及状态， 格式：55 02 EE AA
        </div>

    </div>
    </div>

</div>

{% endblock %} {% block js%}
{{ super() }}
<script type="text/javascript">
var t;
var loopnum = 1;

function btn_get_device_settings()
{
    $.post(
            "api/get_device_settings", {

            },
            function(data, status) {
                console.log(data)
                d = JSON.parse(data)
                console.log(d)
                $("#port_val").html(d.port);
                // toastr["success"]("数据已设置.");
            }
            );
}


function rd_group_set(rd_group)
{
    device_port_val = $("#port_val").val();

    console.log(device_port_val);
    console.log(rd_group);

    $.post(
        "api/rd_group_set", {
            device_port_val: device_port_val,
            rd_group: rd_group
        },
        function(data, status) {
            console.log(data)            
            toastr["success"]("第" + rd_group +"组指令已成功下发.");
        }
    );
}



function update_rd_group_test_loop()
{
    rd_group_test_loop();
    t = setTimeout(update_rd_group_test_loop, 5000);
}


function stop_rd_group_test_loop()
{
    $("#rd_group_test_loop_start_loading").hide();
    clearTimeout(t);
}


function rd_group_test_loop() 
{
    var m=4;
    var n=1;
    if ($("#rnd").prop("checked"))
    {
        console.log("rnd is checked!");
        rd_group = parseInt(Math.random()*(m-n+1)+n);
    }
    else
    {
        console.log("rnd is NOT checked!");
        // set rd_group range is [1,4]
        if (loopnum%5==0)
        {
            loopnum = loopnum + 1;
        }
        rd_group = loopnum%5;
    }


    device_port_val = $("#port_val").val();
    //random range [1,4]

    console.log(device_port_val);
    console.log(rd_group);

    $.post(
        "api/rd_group_test_loop", {
            device_port_val: device_port_val,
            rd_group: rd_group
        },
        function(data, status) {
            loopnum = loopnum + 1;
            console.log(data);            
            toastr["success"]("第" + rd_group +"组指令已成功下发.");
        }
    );
}

function send_cmd()
{
    cmd_str = $("#cmd_str").val()
    console.log(cmd_str);

    $.post(
        "api/set_debug_cmdstr",
        {
            cmd_str:cmd_str
        },
        function(data,status){
            console.log("data: " + data);

            $("#debug_info").append(data.replace(/\\r\\n/g, "\n") + "\n");

            var textarea = document.getElementById('debug_info');
            textarea.scrollTop = textarea.scrollHeight;
            
    });
}


$(document).ready(function() {
    $("#rd_group_test_loop_start_loading").hide();
    btn_get_device_settings();



    $("#btn1_inst_pause").click(function() {
    
        $.post(
            "api/inst_pause", {
            },
            function(data, status) {
                toastr["success"]("命令已下发, 成功.");
                console.log("data: " + data);
            }
        );
    
    });


    $("#btn1_inst_reboot").click(function() {
        a = confirm("重启设备, 确定？")
        if(a)
        {
            $.post(
                "api/inst_reboot", {
                },
                function(data, status) {
                    toastr["success"]("命令已下发, 成功.");
                    console.log("data: " + data);
                }
            );
        }
    });


    $("#btn1_set").click(function() {
        a = confirm("清除所有参数, 确定？")
        if(a)
        {
            $.post(
                "api/clean_all_args", {
                },
                function(data, status) {
                    toastr["success"]("清除所有参数, 成功.");
                    console.log("data: " + data);
                }
            );
        }
    });


    $("#btn2_set").click(function() {
        a = confirm("清除所有记录, 确定？")
        if(a)
        {
            $.post(
                "api/clean_all_recorders", {
                },
                function(data, status) {
                    toastr["success"]("清除所有记录, 成功.");
                    console.log("data: " + data);
                }
            );
        }
    });

    $("#btn3_set").click(function() {
        a = confirm("清除运行时间, 确定？")
        if(a)
        {
            $.post(
                "api/clean_runtime", {
                },
                function(data, status) {
                    toastr["success"]("清除运行时间, 成功.");
                    console.log("data: " + data);
                }
            );
        }
    });


    $("#btn4_set").click(function() {
        a = confirm("重启树莓派, 确定？")
        if(a)
        {
            $.post(
                "api/rp_box_reboot", {
                },
                function(data, status) {
                    toastr["success"]("重启树莓派命令已下发，请等待. 并重启GUI ...");
                    // console.log("data: " + data);
                }
            );
        }
    });


    $("#rd_group_test_loop_start").click(function() {
        $("#rd_group_test_loop_start_loading").show();
        update_rd_group_test_loop();
    });


    $("#rd_group_test_loop_end").click(function() {
        stop_rd_group_test_loop();
    });


    //console 
    $("#btn_clear").click(function(){
        $("#debug_info").html("");
    })

    document.onkeydown = function(e){ 
        var ev = document.all ? window.event : e;
        if(ev.keyCode==13) {
            send_cmd();
        }
    }

    $("#btn_set_debug_cmd").click(function(){
        send_cmd();
    });
    


});
</script>
{% endblock %}